import 'package:bruno/bruno.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getwidget/getwidget.dart';
import 'package:meal/constant/sizes.dart';
import 'package:meal/model/product.dart';
import 'package:meal/model/tree_menu.dart';
import 'package:meal/utils/colors.dart';
import 'package:meal/utils/styles.dart';
import 'package:meal/utils/tools.dart';

///
/// 下架商品
///
class ProductDelist extends StatefulWidget {
  const ProductDelist({Key? key}) : super(key: key);

  @override
  State<ProductDelist> createState() => _ProductDelistState();
}

class _ProductDelistState extends State<ProductDelist> {
  List<TreeMenu> menus = [];

  int findex = 0;

  bool isAll = false;

  late ScrollController firstController;

  Widget get actions {
    return BrnTextAction(
      '确定',
      iconPressed: () {
        Get.back();
      },
      themeData: BrnAppBarConfig(
          actionsStyle: BrnTextStyle(
              color: Colors.white, fontSize: Sizes.default16, fontWeight: FontWeight.normal)),
    );
  }

  @override
  void initState() {
    super.initState();
    firstController = ScrollController();
    menus.add(TreeMenu<ProductModel>(name: '石磨肠粉', children: [
      TreeMenu<ProductModel>(
          entity: ProductModel(
              imgUrl:
                  'https://gw.alicdn.com/imgextra/i1/2939922051/O1CN01kPFaY01R1P6vrXVlN_!!2939922051.jpg_Q75.jpg_.webp',
              name: 'A101 河村石磨肠粉(双蛋双蛋)',
              monthSale: 5,
              inventory: 50,
              actualPrice: 80)),
      TreeMenu<ProductModel>(
          entity: ProductModel(
              imgUrl:
                  'https://gw.alicdn.com/imgextra/i1/2939922051/O1CN01kPFaY01R1P6vrXVlN_!!2939922051.jpg_Q75.jpg_.webp',
              name: 'A101 河村石磨肠粉(双蛋双蛋)',
              monthSale: 5,
              inventory: 50,
              actualPrice: 80)),
      TreeMenu<ProductModel>(
          entity: ProductModel(
              imgUrl:
                  'https://gw.alicdn.com/imgextra/i1/2939922051/O1CN01kPFaY01R1P6vrXVlN_!!2939922051.jpg_Q75.jpg_.webp',
              name: 'A101 河村石磨肠粉(双蛋双蛋)',
              monthSale: 5,
              inventory: 50,
              actualPrice: 80)),
      TreeMenu<ProductModel>(
          entity: ProductModel(
              imgUrl:
                  'https://gw.alicdn.com/imgextra/i1/2939922051/O1CN01kPFaY01R1P6vrXVlN_!!2939922051.jpg_Q75.jpg_.webp',
              name: 'A101 河村石磨肠粉(双蛋双蛋)',
              monthSale: 5,
              inventory: 50,
              actualPrice: 80)),
      TreeMenu<ProductModel>(
          entity: ProductModel(
              imgUrl:
                  'https://gw.alicdn.com/imgextra/i1/2939922051/O1CN01kPFaY01R1P6vrXVlN_!!2939922051.jpg_Q75.jpg_.webp',
              name: 'A101 河村石磨肠粉(双蛋双蛋)',
              monthSale: 5,
              inventory: 50,
              actualPrice: 80)),
    ]));
    menus.add(TreeMenu(name: '面食小吃'));
    menus.add(TreeMenu(name: '粥食小吃'));
    firstController.addListener(() {
      int index = firstController.offset ~/ Sizes.default50;
      if (index != findex) {
        findex = index;
        setState(() {});
      }
    });
  }

  @override
  void dispose() {
    super.dispose();
    firstController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ToolsUtils.getDefaultBackgroundColor(),
      appBar: ToolsUtils.getDefaultBrnAppBar('批量下架', actions: actions),
      body: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(
            width: Sizes.default100,
            child: ListView.builder(
              itemBuilder: (BuildContext ctx, int index) {
                return InkWell(
                  onTap: () {
                    setState(() {
                      findex = index;
                      firstController.animateTo(index * Sizes.default50,
                          duration: const Duration(milliseconds: 200), curve: Curves.linear);
                    });
                  },
                  child: Container(
                    padding: const EdgeInsets.only(left: Sizes.default15),
                    alignment: Alignment.centerLeft,
                    decoration: BoxDecoration(
                      color: findex == index ? Colors.white : Colors.transparent,
                    ),
                    child: Text(
                      '${menus[index].name}',
                      style: StylesUtils.customTextStyle(
                          color: findex == index ? ColorsUtils.colorFf6 : ColorsUtils.color333,
                          fontSize: Sizes.default15),
                    ),
                  ),
                );
              },
              itemExtent: Sizes.default50,
              shrinkWrap: true,
              itemCount: menus.length,
            ),
          ),
          Expanded(
              child: Container(
                  decoration: const BoxDecoration(color: Colors.white),
                  child: Column(
                    children: [
                      Container(
                          height: Sizes.default50,
                          alignment: Alignment.centerLeft,
                          padding: const EdgeInsets.symmetric(horizontal: Sizes.default15),
                          child: Container(
                              height: Sizes.default25,
                              padding: const EdgeInsets.symmetric(horizontal: Sizes.default15),
                              decoration: BoxDecoration(
                                  color: ColorsUtils.rgba(247, 247, 247, 1),
                                  borderRadius: BorderRadius.circular(Sizes.default5)),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Text(
                                    '${menus[findex].name}（${menus[findex].children.length}）',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color797, fontSize: Sizes.default12),
                                  ),
                                  BrnCheckbox(
                                    radioIndex: 0,
                                    onValueChangedAtIndex: (int index, bool value) {
                                      setState(() {
                                        isAll = value;
                                        for (var m in menus[findex].children) {
                                          ProductModel product = m.entity as ProductModel;
                                          product.isSelected = isAll;
                                        }
                                      });
                                    },
                                    isSelected: isAll,
                                    childOnRight: false,
                                    child: Text('全选',
                                        style: StylesUtils.customTextStyle(
                                            color: ColorsUtils.color515,
                                            fontSize: Sizes.default15)),
                                  )
                                ],
                              ))),
                      Expanded(
                          child: ListView.builder(
                        itemBuilder: (BuildContext ctx, int index) {
                          var item = menus[findex].children[index];
                          var product = item.entity as ProductModel;
                          return Container(
                            padding: const EdgeInsets.only(
                                left: Sizes.default10,
                                right: Sizes.default10,
                                bottom: Sizes.default10),
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Container(
                                    width: Sizes.default70,
                                    alignment: Alignment.centerLeft,
                                    child: GFImageOverlay(
                                        width: Sizes.default70,
                                        height: Sizes.default70,
                                        image: NetworkImage(product.imgUrl),
                                        borderRadius: BorderRadius.circular(Sizes.default5))),
                                Expanded(
                                    child: Container(
                                  padding: const EdgeInsets.only(left: Sizes.default10),
                                  child: Column(
                                    children: [
                                      Container(
                                        alignment: Alignment.centerLeft,
                                        margin: const EdgeInsets.only(bottom: Sizes.default5),
                                        child: Text(
                                          product.name,
                                          style: StylesUtils.customTextStyle(
                                              color: ColorsUtils.color333),
                                          overflow: TextOverflow.ellipsis,
                                          maxLines: 1,
                                        ),
                                      ),
                                      Container(
                                        alignment: Alignment.centerLeft,
                                        margin: const EdgeInsets.only(bottom: Sizes.default5),
                                        child: Text(
                                          '月售 ${product.monthSale}',
                                          style: StylesUtils.customTextStyle(
                                              color: ColorsUtils.color999,
                                              fontSize: Sizes.default12),
                                        ),
                                      ),
                                      Container(
                                          alignment: Alignment.centerLeft,
                                          margin: const EdgeInsets.only(bottom: Sizes.default5),
                                          child: Text.rich(TextSpan(
                                            children: [
                                              TextSpan(
                                                text: '库存 ${product.inventory}',
                                                style: StylesUtils.customTextStyle(
                                                    color: ColorsUtils.color999,
                                                    fontSize: Sizes.default12),
                                              ),
                                            ],
                                          ))),
                                      Container(
                                        alignment: Alignment.centerLeft,
                                        margin: const EdgeInsets.only(bottom: Sizes.default5),
                                        child: Wrap(
                                          spacing: Sizes.default10,
                                          children: [
                                            Text(
                                              '₱${product.actualPrice}',
                                              style: StylesUtils.customTextStyle(
                                                  fontSize: Sizes.default15,
                                                  color: ColorsUtils.colorCc0),
                                            ),
                                          ],
                                        ),
                                      )
                                    ],
                                  ),
                                )),
                                Container(
                                    width: Sizes.default40,
                                    alignment: Alignment.centerRight,
                                    child: BrnCheckbox(
                                      radioIndex: index,
                                      isSelected: product.isSelected,
                                      onValueChangedAtIndex: (int index, bool value) {
                                        setState(() {
                                          product.isSelected = value;
                                        });
                                      },
                                    ))
                              ],
                            ),
                          );
                        },
                        shrinkWrap: true,
                        itemCount: menus[findex].children.length,
                      ))
                    ],
                  )))
        ],
      ),
    );
  }
}
